מיקום בעזרת CSS2

מעשי

כעת משאנו מכירים את התיאוריה שעומדת מאחורי מיקום, הבה ניישם זאת באופן מעשי בעזרת תרגיל. התרגיל הוא די ישיר, אך בעל אפקט נחמד שאמור לקדם אתכם עד מיקום ודפי סגנון.

יצירת צל יורד (drop-shadow)

צללים יורדים הם אפקט נפוץ שבדפי האתר הם בלתי אפשריים ללא העזרה של גרפיקה. ובכן, אולי לא בלתי אפשרי, בעזרת CSS2.

הנה הבעיה; אנו רוצים ליצור אפקט שהטקסט בצבע כהה הוא מוצלל ע"י אותו טקסט בצבע בהיר יותר, ולהזיז אותו קצת ימינה ולמטה. נראה כי נצטרך להשתמש במאפיינים הבאים:

• מיקום מוחלט (למקם את האלמנט ואת הצל שלו).
• שמאל- כדי להגדיר את המיקום של הקצה השמאלי של האלמנט והצל שלו.
• עליון - כדי להגדיר את המיקום של הקצה העליון של האלמנט והצל שלו.
• מפתח z - כדי להבטיח שהצל יהיה מתחת לטקסט.

יצירת האלמנט והצל שלו

הדוגמא שלי נמצאת בסוף השיעור.

יצירת כללי דף סגנון

הדוגמא שלי של דף סגנון נמצאת בסוף השיעור.

צל יורד - הלכה למעשה

האם ערכתם תצוגה מוקדמת של היצירה שלכם? האם היא נראית כפי שציפיתם שהיא תיראה? אולי תרצו למשוך אותה ע"י התאמה של החלק העליון והחלק השמאלי של הצל. שימו לב, גם, שזו לא דוגמא טובה. לא הייתי סומך עליה לעבוד בכל זירה רק בגלל שהיא עובדת בסדר בזירה שלכם. כך נראית הדוגמא שלי .

סיכום

תודה רבה לכם שלקחתם את הזמן והשתמשתם במדריך ובשיעור הנ"ל. אני מקווה שהוא היה שימושי לכם ושהבהרתי מעט מן העניינים לגבי כיצד מיקום פועל, וכיצד אתם יכולים להשתמש בו. אם יש לכם היערות כלשהן לגבי השיעור, וכיצד ניתן לשפרו, אנא ידעו אותנו .

תשובות לדוגמא לשיעור המעשי .

דוגמא למקור HTML :

<DIV class="text">This is an example of a drop shadow</DIV>
<DIV class="shadow">This is an example of a drop shadow</DIV>

דוגמא של CSS :

DIV.text {
font-size: xx-large;
font-weight: bold;
position: absolute;
left: 100px;
top: 100px;
z-index: 2
}

DIV.shadow {
font-size: xx-large;
font-weight: bold;
color: gray;
position: absolute;
left: 103px;
top: 103px;
z-index: 1
}